<template>
  <div>
    <p v-if='isReadOnlyPage'>{{strValue}}</p>
    <a-tree-select v-else showSearch :value="value1"
      :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
      :loadData="onLoadData"
      :treeDefaultExpandAll='treeDefaultExpandAll'
      allowClear @change="onchange" :treeData="treeData" treeNodeFilterProp='value' :disabled="isDisabled">
    </a-tree-select>
  </div>
</template>

<script>
import { getHrDepartmentTree } from '@/api/createjobs'
import { getDepartmentLazyChildren } from '@/api/userManagement'
const treeData = [
  {
    title: '全部',
    value: '0-0',
    key: '0-0',
    children: [],
    isShow: true
  }
]
export default {
  name: 'Department',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'isReadOnlyPage', 'isDisabled'],
  data () {
    return {
      changeDepartment: '',
      treeData,
      treeDefaultExpandAll: false
    }
  },
  computed: {
    strValue () {
      if (!this.value) {
        return ''
      }
      if (this.value.name instanceof Array) {
        return this.value.name[0]
      } else {
        return this.value.name
      }
    },
    value1 () {
      if (!this.value) {
        return ''
      }
      console.log(this.value)
      this.$emit('onBlurFn', true)
      return this.value.name
      // this.$emit('creatDepartmentId', value)
    }
  },
  mounted () {
    this.userTemplate()
  },
  methods: {
    onchange (val, label, extra) {
      let obj = {}
      // console.log(`Department: { val: ${JSON.stringify(val)}, label: ${JSON.stringify(label)}}`, extra)
      if (!val) {
        obj = ''
      } else {
        obj = { id: extra.triggerNode.dataRef.id, name: extra.triggerNode.dataRef.title }
      }
      console.log(extra)
      this.$emit('change', obj)
      this.$emit('ckeckedKeys', 'department')
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve()
          return
        }
        getDepartmentLazyChildren({
          id: treeNode.dataRef.id
        }).then(res => {
          if (res.code === 200) {
            const data = res.data
            treeNode.dataRef.children = data.map((item, index) => {
              return {
                title: item.name,
                value: item.name,
                key: item.id,
                id: item.id,
                disabled: !item.checked,
                isLeaf: !item.childrenFlag
              }
            })
          }
          this.treeData = [...this.treeData]
          resolve()
        })
      })
    },
    userTemplate () {
      getHrDepartmentTree().then(response => {
        if (response.data && response.data[0].hasOwnProperty('childrenFlag')) {
          this.treeData = response.data.map((item, index) => { // value: item.name,要支持筛选,筛选是根据value筛选的
            return { title: item.name, value: item.name, key: item.id, id: item.id, disabled: !item.checked, isLeaf: !item.childrenFlag }
          })
        } else {
          this.onLoadData = null // onLoadData会一直执行
          this.treeDefaultExpandAll = true
          this.treeData = resizeTree(response.data)
        }
      }).catch(error => {
        return error.data
      })
    }
  }
}
function resizeTree (arr, key = 0) {
  if (!Array.isArray(arr)) return
  return arr.map((item, index) => {
    let treekey = `${key}-${index}`
    return { title: item.name, value: item.name, key: item.id, id: item.id, disabled: !item.checked, children: resizeTree(item.children, treekey) }
  })
}
</script>
